<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link rel = "icon" href ="/static/images/OpenStack.ico">
      <!-- css -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
    <title>项目-OpenStack &nbsp; Dashboard</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    }
    .first-div{
        height: 55px;
        width:1913px;
        background: #e95420;
        margin: 0px;
        padding: 0px;
    }

    .table{
        height: 30px;
        float: left;
        position: absolute;
        margin-left: 1%;
        margin-top:14px;
        font-size: 18pt;
    }
    .tableadmin{
        height: 30px;
        float: right;
        position: absolute;
        right: 3%;
        margin-top: 17px;
        font-size: 12pt;


    }
    .table-default{
        height: 30px;
        float: left;
        position:absolute;
        left: 15%;
        margin-top: 17px;
        font-size: 12pt;

    }
#main {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    height:872px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #555;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
.wrap-1-1{
    position: absolute;
    left: 200px;
    top: 55px;


}
    </style>

</head>
<body>
<div class="first-div">
  <div class="table">
    <span style="color: white">ubuntu<img src="/static/images/ubuntu.png"> </span>
  </div>
  <div class="tableadmin">
      <span style="color: #ffffff"><img src="/static/images/icon-person.png">&nbsp;admin</span>
     &nbsp; <span><a style="color: white" href="/wyh0282/loginout/"><img src="/static/images/loginout.png">loginout</a></span>
  </div>
  <div class="table-default">
      <span style="color: white"><img src="/static/images/default.jpg">default   &bull;admin</span>
  </div>
</div>
{% block content %}
    <div id="main">

        <div class="left-menu">
             <!-- 侧边栏标签页 -->
        <ul class="nav nav-stacked">
            <!-- 侧边栏选项 -->
            <li role="presentation" class="active">
                <!-- 选项控制data-target对应的显隐 -->
                <a  href="#" data-toggle="collapse" data-target="#list">项目</a>
                <!-- 隐藏的详细菜单 -->
                <ul id="list" class="collapse in">
                    <li class="active">
                         <li><a href="{% url 'wyh0282:serverlist' %}" target="project">实例</a></li>
                        <a href="{% url 'wyh0282:flavorlist' %}" target="project">flavor</a>
                    </li>
                    <li><a href="{% url 'wyh0282:image_list' %}" target="project">映像</a></li>

                </ul>
            </li>

                 <li role="presentation"><a href="#" data-toggle="collapse" data-target="#list1">管理员</a>
                  <ul id="list1" class="collapse in">
                <li class="active">
                      <li> <a  href="{% url 'wyh0282:image_lists' %}" target="project">映像</a></li>
                </li>

                    </ul>
                 </li>

                  <li role="presentation"><a href="#" data-toggle="collapse" data-target="#list1">身份管理</a>
                  <ul id="list1" class="collapse in">
                <li class="active">
                      <li> <a class="active" href="{% url 'wyh0282:projectlist' %}" target="project">项目</a></li>
                      <a href="{% url 'wyh0282:userlist' %}"target="project">用户</a>
                </li>
                  <li>
                    <a href="{% url 'wyh0282:grouplist' %}" target="project">组</a>
                      <a href="{% url 'wyh0282:rolelist' %}" target="project">角色</a>
                </li>
                    </ul>
                 </li>

        </ul>
        </div>
    </div>
{% endblock %}
<div class="wrap-1-1">
    <iframe name="project" width="1600px" height="872px" scrolling="no"  frameborder="0"></iframe>
</div>
</body>
</html>